<!-- 入会配置 -->
<template>
  <div class="warp">
    <!-- 表单区域 -->
    <div class="form-content">
      <div v-if="stageList" class="group">
        <div class="group-header">
          表单设置
        </div>
        <!-- <div class="_header">
          <a-button type="primary" @click="showAddAreaModule(stageIndex)">新增区域</a-button>
        </div> -->
        <a-form layout="horizontal" labelAlign="left" :labelCol="{ span: 3 }" :wrapperCol="{ span: 14 }">
          <a-form-item label="入会阶段">
            <div>
              <a-select v-model="stageIndex" style="width: 400px">
                <a-select-option v-for="(item, index) in stageList" :value="index" :key="index"
                  >第{{ index + 1 }}阶段：{{ item.name }}</a-select-option
                >
              </a-select>
            </div>
            <div>
              <a-button type="primary" @click="showAddStageModule({}, 'add')">新增阶段</a-button>
              <a-button v-if="stageIndex > 0" class="_ml-20" type="danger" @click="handleDelStage">删除阶段</a-button>
              <a class="_ml-20" @click="showAddStageModule(stageList[stageIndex], 'edit', stageIndex)">修改阶段名称</a>
            </div>
          </a-form-item>
          <!-- <a-form-item label="阶段审核">
            <a-switch
              :checked="(stageList[stageIndex] && stageList[stageIndex].isAudit) == 1"
              @change="val => getChecked(val, stageIndex)"
            />
            <span class="_ml-20" style="color: #86909C">开启后本阶段需要管理员审核</span>
          </a-form-item> -->
          <ApprovalUser
            :auditList="stageList[stageIndex] && stageList[stageIndex].customFormStageAuditList"
            :checked="stageList[stageIndex] && stageList[stageIndex].isAudit"
            @getApprovalUser="rows => getApprovalUser(rows, stageIndex)"
            @delApprovalUser="i => delApprovalUser(i, stageIndex)"
            @getChecked="val => getChecked(val, stageIndex)"
          />
        </a-form>

        <div
          v-for="(group, index) in formGroupMap[
            stageList[stageIndex] && (stageList[stageIndex].id || stageList[stageIndex].virtuallyId)
          ]"
          :key="index"
          class="group-content"
        >
          <div class="_header">
            <span style="font-size: 18px; font-weight: bold">{{ group.name }}</span>
            <div>
              <a-icon
                v-if="group.state != 1"
                class="del_icon"
                type="delete"
                @click="handleDeleteGroup(stageIndex, index)"
              />
              <a-icon
                v-if="index !== 0"
                class="up_icon"
                type="arrow-up"
                style="color: #1890ff"
                @click="handleMoveArea(stageIndex, index, 'up')"
              />
              <a-icon
                v-if="
                  index <
                    formGroupMap[
                      stageList[stageIndex] && (stageList[stageIndex].id || stageList[stageIndex].virtuallyId)
                    ].length -
                      1
                "
                class="down_icon"
                type="arrow-down"
                style="color: #1890ff"
                @click="handleMoveArea(stageIndex, index)"
              />
            </div>
          </div>
          <Form
            :item="formItemVoMap[group.id || group.groupId]"
            :formName="`form_${stageIndex}_${index}`"
            :disabled="true"
            :draggable="true"
            @validateSuccess="getValidate"
            @draggableChange="handleMoveField(stageIndex, index, $event.oldIndex, $event.newIndex)"
          >
            <template v-slot:action="scope">
              <a-tag v-if="!scope.subItem.dataType" style="margin-left: 10px;" color="blue">自定义</a-tag>
              <a-icon
                v-if="!scope.subItem.downLoad"
                type="edit"
                style="margin-left: 10px; font-size: 18px;"
                @click="handleShowField('edit', scope.subItem, stageIndex, index, scope.subIndex)"
              />
              <a-icon
                v-if="scope.subItem.isAllowWrite === 1 && !scope.subItem.downLoad"
                type="delete"
                style="margin-left: 10px; font-size: 18px;"
                @click="handleDelete(stageIndex, index, scope.subIndex)"
              />
              <!-- 上移 -->
              <!-- <a-icon
                v-if="scope.subIndex !== 0"
                type="arrow-up"
                style="margin-left: 10px; fontsize: 18px"
                @click="handleMoveField(stageIndex, index, scope.subIndex, 'up')"
              /> -->
              <!-- 下移 -->
              <!-- <a-icon
                v-if="scope.subIndex < formItemVoMap[group.id || group.groupId].length - 1"
                type="arrow-down"
                style="margin-left: 10px; fontsize: 18px"
                @click="handleMoveField(stageIndex, index, scope.subIndex)"
              /> -->
              <a
                v-if="scope.subItem.isInternalInterface === 1 || scope.subItem.isInternalInterface === 2"
                class="_ml-10"
                style="flex-shrink: 0"
                @click="handleViewOptions(scope.subItem)"
                >查看选项</a
              >
            </template>
            <template v-slot:footer="">
              <a-form-model-item label="">
                <a-button
                  :id="group.id || group.groupId"
                  type="primary"
                  @click="handleShowField('add', { moduleType: group.moduleType }, stageIndex, index, undefined)"
                >
                  新增字段
                </a-button>
              </a-form-model-item>
            </template>
          </Form>
        </div>
      </div>
      <div class="_mt-30" style="text-align: center">
        <a-button
          type="primary"
          size="large"
          :loading="submitLoading"
          style="margin-left: 10px; width: 400px"
          @click="handleSave"
          >保存</a-button
        >
      </div>
    </div>
    <!-- 字段库 -->
    <div class="form-key">
      <div class="group">
        <div class="group-header">
          选择收集信息
        </div>
        <Tree
          v-if="tempData.id && fieldLibraryList.length"
          :fieldLibraryList="fieldLibraryList"
          :checkedKeys="stageList[stageIndex].fieldLibraryIds || []"
          :disabledKeys="(stageList[stageIndex].forbiddenIds || []).concat(stageList[stageIndex].otherForbiddenIds)"
          :stageIndex="stageIndex"
          @checkField="checkField"
          @setCheckedKeys="setCheckedKeys"
        />
      </div>
    </div>

    <SearchFieldForm
      v-if="tempData.id && fieldLibraryList.length"
      ref="searchFieldForm"
      :fieldLibraryList="fieldLibraryList"
      :checkedKeys="stageList[stageIndex].fieldLibraryIds || []"
      :disabledKeys="(stageList[stageIndex].forbiddenIds || []).concat(stageList[stageIndex].otherForbiddenIds)"
      :stageIndex="stageIndex"
      @addCustomField="addCustomField"
      @setCheckedKeys="setCheckedKeys"
      @checkField="checkField"
    />
    <AddFieldForm ref="addFieldForm" @addField="addField" @editField="editField" />
    <AddAreaModule ref="addAreaModule" :checkedArea="checkedArea" @add="addArea" />
    <AddStageModule ref="addStageModule" @submit="addStage" />

    <!-- 查看选项内容 -->
    <FieldOptions ref="fieldOptions" :memberType="type" />
  </div>
</template>

<script>
import Tree from './components/tree'
import AddFieldForm from './components/AddFieldForm'
import SearchFieldForm from './components/SearchFieldForm'
import ApprovalUser from './components/approvalUser'
import LabelBox from './components/labelBox'
import Form from '@/components/Form'
import AddAreaModule from './components/addAreaModule'
import AddStageModule from './components/addStageModule'
import FieldOptions from './components/fieldOptions'
import { customFieldLibraryList } from '@/api/member/member'
import { templateById, updateApplyTemplate } from '@/api/member/member'
import { cloneDeep } from 'lodash-es'

export default {
  props: ['type'],
  components: {
    Tree,
    AddFieldForm,
    SearchFieldForm,
    ApprovalUser,
    LabelBox,
    Form,
    AddAreaModule,
    AddStageModule,
    FieldOptions
  },
  data() {
    return {
      other: '',
      form: this.$form.createForm(this),
      stageIndex: 0,
      stageList: [],
      formGroupMap: {},
      formItemVoMap: {},
      typeObj: {
        Switch: false,
        CheckboxGroup: [],
        RadioGroup: ''
      },
      fieldForm: {
        sIndex: undefined,
        gIndex: undefined,
        fIndex: undefined
      },
      tempData: {
        customFormId: undefined,
        enabled: undefined,
        id: undefined,
        isPay: undefined,
        isQuestionnaire: undefined,
        isReceipt: undefined,
        payType: undefined,
        questionnaireId: undefined,
        receiptType: undefined,
        customFormDto: {},
        replyFileUrl: undefined,
        payFileUrl: undefined
      },
      payTypeList: [{ label: '对公转账', value: 'publicAccount' }],
      tempFileForm: {
        replyFileUrl: undefined,
        payFileUrl: undefined
      },
      delIds: [],
      checkedArea: [],
      submitLoading: false,
      /** 字段库列表 */
      fieldLibraryList: []
    }
  },
  computed: {},
  watch: {
    stageIndex(val) {
      let currentForbiddenIds = this.stageList[val].forbiddenIds || []
      let otherForbiddenIds = this.stageList
        .filter((f, index) => index !== val)
        .reduce((pre, cur) => {
          pre = pre.concat(cur.fieldLibraryIds)
          return pre
        }, [])
      this.stageList[val].forbiddenIds = currentForbiddenIds.filter(id => !this.delIds.includes(id))
      this.stageList[val].otherForbiddenIds = otherForbiddenIds.filter(id => !currentForbiddenIds.includes(id))
      this.delIds = []

      this.getCheckedArea()
    },
    formGroupMap: {
      handler(val) {
        this.getCheckedArea()
        // return area
      },
      deep: true
    }
  },
  methods: {
    async getTemplateById() {
      let res = await templateById(this.type)

      this.tempData = res.data || {}

      let { customFormVo } = cloneDeep(this.tempData)

      this.stageList = (customFormVo.stageList || []).map((stage, sIndex1) => {
        return {
          ...stage,
          otherForbiddenIds: (customFormVo.stageList || [])
            .filter((f, sIndex2) => sIndex1 !== sIndex2)
            .reduce((pre, cur) => {
              pre = pre.concat(cur.fieldLibraryIds || [])
              return pre
            }, []),
          auditUserIds: (stage.customFormStageAuditList || []).map(aduit => aduit.userId)
        }
      })

      this.formGroupMap = customFormVo.formGroupMap || {}

      this.formItemVoMap = customFormVo.formItemVoMap || {}
    },
    getCheckedArea() {
      let { stageList, formGroupMap, stageIndex } = this
      let area = (
        formGroupMap[stageList[stageIndex] && (stageList[stageIndex].id || stageList[stageIndex].virtuallyId)] || []
      ).map(item => item.moduleType)
      this.checkedArea = area
    },
    //字段选中事件
    checkField(data, checked, module) {
      let stage = this.stageList[this.stageIndex]

      let groupIndex = (this.formGroupMap[stage.id || stage.virtuallyId] || []).findIndex(
        f => f.moduleType === data.moduleType
      )
      let currentGroup = (this.formGroupMap[stage.id || stage.virtuallyId] || [])[groupIndex]

      const addDefaultFields = item => {
        return {
          fieldLibraryId: item.fieldLibraryId || item.id,
          fieldLibraryParentId: item.fieldLibraryParentId || item.parentId,
          isAllowWrite: item.isAllowWrite === 0 ? 0 : 1,
          id: undefined,
          showName: item.showName || item.name,
          // sort: item.fieldLibraryId || item.id
          sort: this.getFieldMaxSort(currentGroup) + 1
        }
      }

      //已存在区域
      if (groupIndex != -1) {
        //叶子节点
        if (data.isLeaf) {
          if (checked) {
            let index = (this.formItemVoMap[currentGroup.id || currentGroup.groupId] || []).findIndex(
              f => f.fieldLibraryId === data.id
            )
            if (index === -1 && !data.disabled) {
              if (!this.formItemVoMap[currentGroup.id || currentGroup.groupId]) {
                this.formItemVoMap[currentGroup.id || currentGroup.groupId] = []
              }
              this.delIds = this.delIds.filter(id => data.id !== id)
              this.formItemVoMap[currentGroup.id || currentGroup.groupId].push({ ...data, ...addDefaultFields(data) })
            }
          } else {
            if (!data.disabled) {
              let index = this.formItemVoMap[currentGroup.id || currentGroup.groupId].findIndex(
                f => f.fieldLibraryId === data.id
              )
              if (index != -1) {
                this.delIds.push(this.formItemVoMap[currentGroup.id || currentGroup.groupId][index].fieldLibraryId)
                this.formItemVoMap[currentGroup.id || currentGroup.groupId].splice(index, 1)
              }
            }
          }
          this.formScrollIntoView(currentGroup.id || currentGroup.groupId)
        } else {
          data.children.map(item => {
            this.checkField(item, checked, {})
          })
        }
      } else {
        //区域不存在，手动添加
        if (!this.formGroupMap[stage.id || stage.virtuallyId]) {
          this.formGroupMap[stage.id || stage.virtuallyId] = []
        }
        let groupId = this.rand(1, 200)
        this.formGroupMap[stage.id || stage.virtuallyId].push({
          ...module,
          id: undefined,
          sort: this.getAreaMaxSort() + 1,
          groupId,
          children: undefined
        })
        this.checkField(data, checked, module)
      }
    },

    formScrollIntoView(groupId) {
      this.$nextTick(() => {
        const el = document.getElementById(groupId)
        if (el) {
          el.scrollIntoView({
            block: 'center',
            inline: 'nearest',
            behavior: 'smooth',
            offset: { top: 100, left: 0 }
          })
        }
      })
    },

    getFieldMaxSort(currentGroup) {
      let maxNum =
        Math.max.apply(
          null,
          (this.formItemVoMap[currentGroup.id || currentGroup.groupId] || []).map(item => item.sort)
        ) || 1
      if (maxNum == -Infinity) return 1
      else return maxNum
    },
    setCheckedKeys(keys) {
      this.stageList[this.stageIndex].fieldLibraryIds = keys
    },
    //显示自定义字段弹窗
    handleShowField(type, row, sIndex, gIndex, fIndex) {
      let data = JSON.parse(JSON.stringify(row))
      let obj = {
        type: type,
        data: {
          ...data,
          customFormItemAnswerDtoList: data.customFormItemAnswerList || data.customFormItemAnswerDtoList || []
        }
      }
      this.fieldForm.sIndex = sIndex
      this.fieldForm.gIndex = gIndex
      this.fieldForm.fIndex = fIndex
      if (type === 'add') {
        /** 优先弹出固定字段搜索弹窗 */
        this.$refs.searchFieldForm.show(obj)
      } else {
        this.addCustomField(obj)
      }
    },
    /** 未搜索到字段, 弹出自定义字段添加弹窗 */
    addCustomField(obj) {
      this.$refs.addFieldForm.show(obj)
    },
    //新增字段
    addField(form) {
      let { sIndex, gIndex } = this.fieldForm

      let stage = this.stageList[sIndex],
        group = this.formGroupMap[stage.id || stage.virtuallyId][gIndex],
        itemList = this.formItemVoMap[group.id || group.groupId] || [],
        item = itemList[itemList.length - 1]

      const fMap = JSON.parse(JSON.stringify(this.formItemVoMap))

      if (!fMap[group.id || group.groupId]) {
        fMap[group.id || group.groupId] = []
      }

      fMap[group.id || group.groupId].push({
        ...form,
        content: this.typeObj[form.itemType],
        sort: form.sort > 1 ? form.sort : item ? item.sort + 1 : 1
      })

      this.formItemVoMap = JSON.parse(JSON.stringify(fMap))
    },
    //更改字段项
    editField(form) {
      let newForm = JSON.parse(JSON.stringify(form))
      let { sIndex, gIndex, fIndex } = this.fieldForm

      let stage = this.stageList[sIndex],
        group = this.formGroupMap[stage.id || stage.virtuallyId][gIndex]

      this.formItemVoMap[group.id || group.groupId].splice(fIndex, 1, {
        ...newForm,
        customFormItemAnswerList: newForm.customFormItemAnswerDtoList,
        content: this.typeObj[form.itemType]
      })

      this.$forceUpdate()
    },
    handleDelete(sIndex, gIndex, subIndex) {
      let stage = this.stageList[sIndex],
        group = this.formGroupMap[stage.id || stage.virtuallyId][gIndex],
        item = this.formItemVoMap[group.id || group.groupId][subIndex] || {}

      if (item.fieldLibraryId) {
        //删除当前选中的节点id
        let idIndex = this.stageList[this.stageIndex].fieldLibraryIds.findIndex(id => id === item.fieldLibraryId)
        this.stageList[this.stageIndex].fieldLibraryIds.splice(idIndex, 1)
        this.delIds.push(item.fieldLibraryId)

        //删除父级节点id
        let fIndex = this.stageList[this.stageIndex].fieldLibraryIds.findIndex(id => id === item.fieldLibraryParentId)
        if (fIndex != -1) this.stageList[this.stageIndex].fieldLibraryIds.splice(fIndex, 1)

        //删除根节点id
        let rootIndex = this.stageList[this.stageIndex].fieldLibraryIds.findIndex(id => id === item.moduleType)
        if (rootIndex != -1) this.stageList[this.stageIndex].fieldLibraryIds.splice(rootIndex, 1)
      }

      this.formItemVoMap[group.id || group.groupId].splice(subIndex, 1)
    },
    //字段项排序
    handleMoveField(sIndex, gIndex, oldIndex, newIndex) {
      let stage = this.stageList[sIndex]
      let group = this.formGroupMap[stage.id || stage.virtuallyId][gIndex]
      let list = this.formItemVoMap[group.id || group.groupId] || []
      let item1 = list[oldIndex]
      // let item2 = list[newIndex]
      // let sort = item1.sort
      // item1.sort = item2.sort
      // item2.sort = sort
      item1.sort = newIndex
      this.formItemVoMap[group.id || group.groupId].splice(oldIndex, 1)
      this.formItemVoMap[group.id || group.groupId].splice(newIndex, 0, item1)
      // const newItemMap = JSON.parse(JSON.stringify(this.formItemVoMap))

      // newItemMap[group.id || group.groupId].splice(oldIndex, 1, JSON.parse(JSON.stringify(item1)))

      // newItemMap[group.id || group.groupId].splice(newIndex, 1, JSON.parse(JSON.stringify(item2)))

      // newItemMap[group.id || group.groupId].sort((item1, item2) => {
      //   return item1.sort - item2.sort
      // })

      // this.formItemVoMap = JSON.parse(JSON.stringify(newItemMap))
    },
    //区域项排序
    handleMoveArea(sIndex, gIndex, type) {
      let newIndex = type === 'up' ? gIndex - 1 : gIndex + 1,
        stage = this.stageList[sIndex],
        list = this.formGroupMap[stage.id || stage.virtuallyId],
        item1 = list[gIndex],
        item2 = list[newIndex],
        sort = item1.sort
      item1.sort = item2.sort
      item2.sort = sort

      this.formGroupMap[stage.id || stage.virtuallyId].splice(gIndex, 1, item1)
      this.formGroupMap[stage.id || stage.virtuallyId].splice(newIndex, 1, item2)

      this.formGroupMap[stage.id || stage.virtuallyId].sort((item1, item2) => {
        return item1.sort - item2.sort
      })
    },

    //显示新增区域弹窗
    showAddAreaModule() {
      this.$refs.addAreaModule.show()
    },
    //新增区域
    addArea(areas) {
      let stage = this.stageList[this.stageIndex]

      const gMap = JSON.parse(JSON.stringify(this.formGroupMap))

      if (!gMap[stage.id || stage.virtuallyId]) {
        gMap[stage.id || stage.virtuallyId] = []
      }

      areas.map(area => {
        let groupId = this.rand(1, 200)
        gMap[stage.id || stage.virtuallyId].push({
          ...area,
          id: undefined,
          groupId,
          moduleType: area.id,
          sort: this.getAreaMaxSort() + 1
          // sort: 1
        })
        this.formItemVoMap[groupId] = []
      })
      this.formGroupMap = JSON.parse(JSON.stringify(gMap))
    },
    //生成随机数字
    rand(min, max) {
      return Math.floor(Math.random() * (max - min)) + min
    },
    getAreaMaxSort() {
      let { formGroupMap, stageList, stageIndex } = this
      let maxNum =
        Math.max.apply(
          null,
          (
            formGroupMap[stageList[stageIndex] && (stageList[stageIndex].id || stageList[stageIndex].virtuallyId)] || []
          ).map(item => item.sort)
        ) || 1
      if (maxNum == -Infinity) return 1
      else return maxNum
    },
    //删除区域
    handleDeleteGroup(sIndex, gIndex) {
      let stage = this.stageList[sIndex],
        group = this.formGroupMap[stage.id || stage.virtuallyId][gIndex],
        delIds = [group.groupId]
          .concat((this.formItemVoMap[group.id || group.groupId] || []).map(item => item.fieldLibraryId))
          .concat((this.formItemVoMap[group.id || group.groupId] || []).map(item => item.parentId)),
        fieldLibraryIds = this.stageList[this.stageIndex].fieldLibraryIds || []
      this.delIds = this.delIds.concat(delIds)
      this.stageList.splice(this.stageIndex, 1, {
        ...stage,
        fieldLibraryIds: fieldLibraryIds.filter(id => !delIds.includes(id))
      })

      this.formGroupMap[stage.id || stage.virtuallyId].splice(gIndex, 1)
    },

    //显示新增阶段弹窗
    showAddStageModule(info, type, index) {
      this.$refs.addStageModule.show(info, type, index)
    },
    //新增阶段
    addStage(name, type, index) {
      if (type === 'add') {
        let virtuallyId =
          Math.max.apply(
            null,
            this.stageList.map(item => item.id)
          ) + 1
        let maxSort = Math.max.apply(
          null,
          this.stageList.map(item => item.sort)
        )
        if (maxSort == -Infinity) {
          maxSort = 1
        }
        this.stageList.push({
          virtuallyId,
          name,
          auditUserIds: [],
          sort: maxSort + 1,
          customFormGroupDtoList: [],
          fieldLibraryIds: [],
          forbiddenIds: []
        })

        this.formGroupMap[virtuallyId] = []

        this.stageIndex = this.stageList.length - 1
      } else {
        let stage = this.stageList[index]
        stage.name = name
        this.stageList.splice(index, 1, stage)
      }
    },
    handleDelStage() {
      this.stageList.splice(this.stageIndex, 1)
      this.stageIndex -= 1
    },
    //获取选中的审批人
    getApprovalUser(rows, index) {
      let item = this.stageList[index]
      item.customFormStageAuditList = rows
      item.auditUserIds = rows.map(row => row.userId)
      this.stageList.splice(index, 1, item)
    },
    //删除已选中的审批人
    delApprovalUser(i, sIndex) {
      let item = JSON.parse(JSON.stringify(this.stageList[sIndex]))
      item.customFormStageAuditList.splice(i, 1)
      item.auditUserIds.splice(i, 1)
      console.log(this.stageList[sIndex])
      this.stageList.splice(sIndex, 1, item)
    },
    getChecked(val, sIndex) {
      let item = this.stageList[sIndex]
      item.isAudit = val
      this.stageList.splice(sIndex, 1, item)
    },
    getConfigChecked(val, field) {
      this.tempData[field] = val
    },
    handleDownLoad(url) {
      window.open(url, '_blank')
    },
    getValidate(values) {},
    //查看选项
    handleViewOptions(field) {
      this.$refs.fieldOptions.show(field)
    },
    async handleSave() {
      let { customFormVo } = this.tempData
      let data = {
        ...this.tempData,
        customFormVo: undefined,
        customFormDto: {
          id: customFormVo.id,
          name: customFormVo.name,
          customFormStageDtoList: this.stageList.map((stage, sIndex1) => {
            return {
              ...stage,
              auditUserIds: (stage.customFormStageAuditList || []).map(aduit => aduit.userId),
              customFormGroupDtoList: (this.formGroupMap[stage.id || stage.virtuallyId] || []).map(group => {
                return {
                  ...group,
                  customFormItemDtoList: (this.formItemVoMap[group.id || group.groupId] || []).map((item, index) => {
                    return {
                      ...item,
                      disabled: item.orgDisabled,
                      sort: index,
                      customFormItemAnswerDtoList: item.customFormItemAnswerDtoList || item.customFormItemAnswerList
                    }
                  })
                }
              })
            }
          })
        }
      }

      if (data.customFormDto.customFormStageDtoList.findIndex(item => !item.customFormGroupDtoList.length) !== -1) {
        return this.$message.warning('请完善阶段数据')
      }

      try {
        this.submitLoading = true
        let { code } = await updateApplyTemplate({ ...data })
        this.submitLoading = false
        this.$message.success('保存成功')
        if (code === 0) {
          this.getTemplateById()
        }
      } catch (error) {
        this.submitLoading = false
      }
    }
  },
  created() {
    this.getTemplateById()
    customFieldLibraryList().then(res => {
      this.fieldLibraryList = res.data
    })
  },
  mounted() {}
}
</script>
<style scoped lang="less">
.warp {
  display: flex;

  .form-content {
    width: 760px;
    flex-shrink: 0;
    margin-right: 30px;
  }
  .form-key {
    flex: 1;
  }
}

.stage-header {
  position: relative;
}

.stage-del {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 18px;
}

.group {
  padding: 16px;
  margin-top: 20px;
  // box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  border: 1px solid #e5e6eb;
  height: calc(100vh - 320px);
  overflow-y: scroll;

  .group-header {
    padding: 12px 0;
    font-size: 16px;
    color: #1d2129;
    border-bottom: 1px solid #e5e6eb;
    margin-bottom: 20px;
  }

  ._header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // position: relative;

    .del_icon,
    .up_icon,
    .down_icon {
      font-size: 18px;
      margin-right: 10px;
    }
  }
}

.group-content {
  margin-top: 20px;
  padding: 10px;
  border-radius: 20px;
  background: #f7f7f7;
  ._header {
    margin: 20px 0;
    margin-left: 20px;
  }
}
</style>
